<template>
  <div class="content">
    <div class="item" @click="goPage(accountType[Info.Category] + '台账')">
      <div class="myIcon">
        <svg-icon :icon-class="accountType[Info.Category] + '台账'" />
      </div>
      {{ accountType[Info.Category] }}台账
    </div>
    <div class="item" @click="selectMaintainPlan">
      <div class="myIcon">
        <svg-icon :icon-class="'开始' + checkType[Info.Category]" />
      </div>
      开始{{ checkType[Info.Category] }}
    </div>
    <div
      class="item"
      @click="
        goPage(category[Info.Category] + checkType[Info.Category] + '记录')
      "
    >
      <div class="myIcon">
        <svg-icon :icon-class="checkType[Info.Category] + '记录'" />
      </div>
      {{ checkType[Info.Category] }}记录
    </div>
  </div>
  <div>
    <MyPopup
      v-model:showPopup="show"
      :title="checkType[Info.Category] + '方案'"
      category="设备保养方案"
      :query="{
        ID: route.query.ID
      }"
      :showCode="true"
      @getItem="getItem"
    />
  </div>
</template>

<script setup>
import useUserStore from '@/store/modules/user.js';
import { getCurrentInstance, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { DeviceStartMaintain } from '@/api/teachDevice/maintain.js';
import { GetDeviceDetail } from '@/api/teachDevice/account.js';
import { GetMaintainDataList_Page } from '@/api/teachDevice/maintain.js';
import defaultSettings from '@/settings';
import {
  category,
  checkType,
  accountType
} from '@/views/Amobile/DeviceManage/conmon.js';

const userInfo = useUserStore().userInfo;
const props = defineProps({});
const { proxy } = getCurrentInstance();
const show = ref(false);
const router = useRouter();
const route = useRoute();
const query = ref({});
const logID = ref(0);
const selectItem = ref({});
const deviceDetail = ref({});
const Info = ref({});

function goPage(name) {
  let path = '';
  let query = {};
  console.log(name);
  switch (name) {
    case '装备台账':
      path = '/DeviceManage/DeviceAccount';
      query = {
        DeviceID: route.query.ID
      };
      break;
    case '教学装备保养':
      path = '/DeviceManage/DeviceMaintain';
      query = {
        ID_MaintainPlan: selectItem.value.ID_MaintainPlan,
        LogID: logID.value,
        DeviceID: route.query.ID
      };
      break;
    case '教学装备保养记录':
      path = '/DeviceManage/MaintainLogList';
      query = {
        ID: route.query.ID
      };
      break;
    case '工具台账':
      path = '/DeviceManage/DeviceAccount';
      query = {
        DeviceID: route.query.ID
      };
      break;
    case '办公工具校验':
      path = '/DeviceManage/DeviceMaintain';
      query = {
        ID_MaintainPlan: selectItem.value.ID_MaintainPlan,
        LogID: logID.value,
        DeviceID: route.query.ID
      };
      break;
    case '办公工具校验记录':
      path = '/DeviceManage/MaintainLogList';
      query = {
        ID: route.query.ID
      };
      break;
  }
  router.push({ path, query });
}

onMounted(() => {
  getDetail();
});
async function getDetail() {
  try {
    let res = await GetDeviceDetail({ ID: route.query.ID });
    deviceDetail.value = res.data;
    Info.value = res.data.Info;
    document.title =
      accountType[Info.value.Category] + '管理' + ' - ' + defaultSettings.title;
  } catch (error) {
    console.log(error);
  }
}

async function getItem(item) {
  if (!item.ID) return proxy.$toast('请选择方案');
  selectItem.value = item;
  query.value.ID = item.ID;
  try {
    let query = {
      ID_Device: item.ID_Device,
      ID_MaintainPlan: item.ID_MaintainPlan,
      Name_Maintain: item.Name_MaintainPlan
    };
    let res = await DeviceStartMaintain(query);
    logID.value = res.data;
    goPage(category[Info.value.Category] + checkType[Info.value.Category]);
  } catch (error) {
    console.log(error);
  }
}

async function selectMaintainPlan() {
  try {
    //检查保养记录中是否存在保养中
    let res = await GetMaintainDataList_Page({
      Device: route.query.ID,
      IsFinish: 'false',
      NoPage: '',
      PageIndex: 1,
      PageSize: 10
    });
    if (res.data.List?.length) {
      router.push({
        path: '/DeviceManage/DeviceMaintain',
        query: {
          ID_MaintainPlan: res.data?.List[0].ID_MaintainPlan,
          LogID: res.data?.List[0].ID,
          DeviceID: route.query.ID
        }
      });
      return;
    }
    filterStatus();
    show.value = true;
  } catch (error) {
    console.log(error);
  }
}

function filterStatus() {
  switch (Number(deviceDetail.value.Info.Category)) {
    //教学装备
    case 1:
      switch (Number(deviceDetail.value.Info.State)) {
        case 1:
          break;
        case 2:
          throw proxy.$toast(Info.value.Name + '保养中');
        case 3:
          throw proxy.$toast(Info.value.Name + '维修中');
        case 4:
          throw proxy.$toast(Info.value.Name + '使用中');
      }
      break;
    //办公工具
    case 2:
      if (Number(deviceDetail.value.Info.State_Self == 3)) {
        throw proxy.$toast(Info.value.Name + '已报废');
      }
      switch (Number(deviceDetail.value.Info.State)) {
        case 1:
          break;
        case 2:
          throw proxy.$toast(Info.value.Name + '检验中');
        case 3:
          throw proxy.$toast(Info.value.Name + '维修中');
        case 4:
          throw proxy.$toast(Info.value.Name + '使用中');
      }
      break;
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20rpx;
  .item {
    display: flex;
    border: #ddd solid 1px;
    border-radius: 10rpx;
    height: 90rpx;
    background-color: white;
    align-items: center;
    justify-content: center;
    font-size: 18rpx;
    .myIcon {
      width: 55rpx;
      height: 55rpx;
      box-sizing: border-box;
      border-radius: 50%;
      border: 5px solid #59aef2;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 30px;
    }
    &:nth-child(2) {
      .myIcon {
        border: 5px solid #f1634d;
      }
    }
    &:nth-child(3) {
      .myIcon {
        border: 5px solid #00b578;
      }
    }
  }
}
</style>
